<template>
  <div class="itemimghead" :class="isBigHead ? 'on' : ''">
    <router-link
      :to="{ name: 'NEWCONTENT', params: { usid: item.userId } }"
      :class="item.isNewContent ? 'on' : ''"
      v-if="item.isNewContent"
    >
      <img v-lazy="item.userHead" :alt="item.nickName" />
    </router-link>
    <router-link :to="{ name: 'USER', params: { usid: item.userId } }" v-else>
      <img v-lazy="item.userHead" :alt="item.nickName" />
    </router-link>
    <router-link
      :to="{ name: 'UPDATEIMG', params: { usid: $store.state.user.userId } }"
      class="itemimghead_update"
      v-if="isBigHead && isAddContent"
      ><i class="icon-add-circle"></i
    ></router-link>
  </div>
</template>
<script>
export default {
  name: "ItemImgHead",
  props: {
    item: {
      type: Object,
      default() {
        return {
          userHead: "",
          nickName: "undefined",
        };
      },
    },
    isBigHead: {
      type: Boolean,
      default() {
        return false;
      },
    },
    isAddContent: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itemimghead {
  margin: 0 auto;
  position: relative;
  &.on {
    width: (48+3 * 2) / @base;
    height: (48+3 * 2) / @base;
    a {
      width: 48 / @base;
      height: 48 / @base;
      border-radius: 48 / @base;
      img {
        width: 46 / @base;
        height: 46 / @base;
      }
      &.itemimghead_update {
        position: absolute;
        width: 16 / @base;
        height: 16 / @base;
        border-radius: 16 / @base;
        background-color: #333;
        color: #fff;
        bottom: 0;
        right: -5 / @base;
        font-size: 16 / @base;
        vertical-align: super;
      }
    }
  }
  a {
    margin: 0 auto;
    &.on {
      //background-color: rgb(165, 42, 42);
      background: linear-gradient(-60deg, #ffd700, #f00, #9400d3);
    }
    width: 34 / @base;
    height: 34 / @base;
    border-radius: 34 / @base;
    overflow: hidden;
    display: block;
    padding: 3 / @base;
    background-color: #efefef;
    img {
      width: 32 / @base;
      height: 32 / @base;
      border-radius: 32 / @base;
      border: 1 / @base solid #ccc;
      overflow: hidden;
      display: block;
      background-color: #ccc;
    }
  }
}
</style>
